<template>
  <div class="table-demo">
    <div class="title">
      表格数据由表格组件内部接口请求获取
    </div>
    <ws-table :columns="tableColumns"
              :operation="operation"
              url="post|/user/page"
              @handle-edit="handleEdit"
    >
      <template #level="{row}">
        <span style="color:deepskyblue">
          {{ row.level }}
        </span>
      </template>
      <template #opera="{row, index}">
        <el-button link type="success" @click="handleEdit(row, index)">插槽</el-button>
      </template>
    </ws-table>
  </div>
</template>

<script setup>
defineOptions({
  name: 'table_insideQuery'
})
const state = reactive({
  tableColumns: [
    {label: '页码', prop: 'page', align: 'center', width: 60},
    {label: '姓名', prop: 'staffName', sortable: 'custom'},
    {label: '手机号', prop: 'phone', sortable: 'custom'},
    {label: '地址', prop: 'address', sortable: 'custom'},
    {label: 'Email', prop: 'email', sortable: 'custom'},
    {label: '创建时间', prop: 'createTime', sortable: 'custom'},
    {
      label: '会员等级', type: 'slot', prop: 'level', sortable: 'custom',
      filters: [{text: '★', value: '★'}, {text: '★★', value: '★★'}, {text: '★★★', value: '★★★'}, {
        text: '★★★★',
        value: '★★★★'
      }, {text: '★★★★★', value: '★★★★★'}],
      filterMethod: (value, row, column) => {
        const property = column['property']
        return row[property] === value
      }
    }
  ],
  operation: {
    data: [
      {label: '编辑', handle: 'edit', type: 'primary'}
    ]
  }
})
const {tableColumns, operation} = toRefs(state)
onMounted(() => {
})
const handleEdit = (row, index) => {
  Emessage('success', row)

}

</script>

<style lang="scss" scoped>
.table-demo {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    height: 50px;
    align-items: center;
    font-size: 20px;
  }

  .ws-table {
    width: 100%;
    height: calc(100% - 50px);
  }
}
</style>
